@extends('backend.layouts.main')
@section('content')
    <link rel="stylesheet" type="text/css" href="{{URL::asset('backend/css/webupload/webuploader.css')}}">
    <script type="text/javascript" src="{{URL::asset('backend/js/webupload/webuploader.js')}}"></script>
    <script type="text/javascript" src="{{URL::asset('backend/js/my97/WdatePicker.js')}}"></script>
    <div class="col-md-12">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">课程新增</h3>
            </div>
            <form method="POST" action="{{URL('admin/dances')}}">
                {{ csrf_field() }}
                <div class="form-group">
                    <div class="radio">
                        @if (Auth::user()['users_status'] == 1)
                            <label id="league">
                                <input type="radio" name="types" value="0" checked>团课
                            </label>
                            <label id="subscribe">
                                <input type="radio" name="types" value="1">私教
                            </label>
                        @endif
                    </div>
                </div>
                <div class="box-body">
                    <div class="form-group">
                        <label for="inputWarning">课程名称</label>
                        <select class="form-control select2" style="width: 100%;" name="name">
                            @foreach($dances AS $key=>$per)
                                <option value='{{$key}}'>{{$per}}</option>
                            @endforeach
                        </select>
                        @if ($errors->has('name'))
                            <span class="help-block">
                        <strong style="color: #a94442;">{{ $errors->first('name') }}</strong>
                        </span>
                        @endif
                    </div>
                    <div class="form-group">
                        <label for="inputWarning">课程封面图</label>

                        <div id="uploader-demo">
                            <!--用来存放item-->
                            <div id="fileList" class="uploader-list"></div>
                            <div id="filePicker">选择图片</div>
                        </div>

                        @if ($errors->has('images'))
                            <span class="help-block">
                        <strong style="color: #a94442;">{{ $errors->first('images') }}</strong>
                    </span>
                        @endif
                    </div>
                    @if (Auth::user()['users_status'] == 1)
                        <div class="form-group">
                            <label for="inputWarning">授课老师</label>
                            <select class="form-control select2" style="width: 100%;" name="teacher_id">
                                @foreach($userList AS $key=>$per)
                                    <option value='{{$per->id}}'>{{$per->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    @endif
                    <div id="by_time">
                        <div class="form-group">
                            <label for="inputWarning">上课开始时间</label>
                            <input class="Wdate" type="text" autocomplete="off" name="begin_time" placeholder="请选择日期"
                                   id="begin_time" onClick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'})">
                            @if ($errors->has('begin_time'))
                                <span class="help-block">
                            <strong style="color: #a94442;">{{ $errors->first('begin_time') }}</strong>
                        </span>
                            @endif
                        </div>
                        <div class="form-group">
                            <label for="inputWarning">上课截止时间</label>
                            <input class="Wdate" type="text" autocomplete="off" name="end_time" placeholder="请选择日期"
                                   id="end_time" onClick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'})">
                            @if ($errors->has('end_time'))
                                <span class="help-block">
                            <strong style="color: #a94442;">{{ $errors->first('end_time') }}</strong>
                        </span>
                            @endif
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputWarning">课程费用</label>
                        <input type="number" class="form-control" name="course_price" step="0.01"
                               value="{{ old('course_price')}}">
                        @if ($errors->has('course_price'))
                            <span class="help-block">
                        <strong style="color: #a94442;">{{ $errors->first('course_price') }}</strong>
                    </span>
                        @endif
                    </div>
                    <div class="form-group">
                        <label for="inputWarning">vip价格</label>
                        <input type="number" class="form-control" name="vip_price" step="0.01"
                               value="{{ old('vip_price')}}">
                        @if ($errors->has('vip_price'))
                            <span class="help-block">
                        <strong style="color: #a94442;">{{ $errors->first('vip_price') }}</strong>
                    </span>
                        @endif
                    </div>
                    @if (Auth::user()['users_status'] == 1)
                        <div class="form-group" id="league_number">
                            <label for="inputWarning">团课上课人数</label>
                            <input type="text" class="form-control" name="league_number"
                                   value="{{ old('league_number')}}">
                            @if ($errors->has('league_number'))
                                <span class="help-block">
                        <strong style="color: #a94442;">{{ $errors->first('league_number') }}</strong>
                    </span>
                            @endif
                        </div>
                    @endif
                    <div class="form-group">
                        <label for="inputWarning">上课地点</label>
                        <input type="text" class="form-control" name="address" value="{{ old('address')}}">
                        @if ($errors->has('address'))
                            <span class="help-block">
                        <strong style="color: #a94442;">{{ $errors->first('address') }}</strong>
                    </span>
                        @endif
                    </div>
                    <div class="form-group">
                        <label for="inputWarning">舞蹈内容</label>
                        <textarea class="form-control" rows="3" name="contents" placeholder="舞蹈内容..."></textarea>
                        @if ($errors->has('contents'))
                            <span class="help-block">
                        <strong style="color: #a94442;">{{ $errors->first('contents') }}</strong>
                    </span>
                        @endif
                    </div>
                    <div class="form-group">
                        <div class="radio">
                            <label>
                                <input type="radio" name="status" value="0" checked>启用
                            </label>
                            <label>
                                <input type="radio" name="status" value="1">禁用
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputWarning">备注</label>
                        <textarea class="form-control" rows="3" name="remark" placeholder="备注......"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <input type="hidden" class="form-control" name="images" id="imagesId">
                </div>
                <div class="box-footer">
                    <button type="submit" class="btn btn-primary">提交</button>
                </div>
            </form>
        </div>
    </div>
    <script>
        $("#league").on('click', function () {
            $("#league_number").show();
        });
        $("#subscribe").on('click', function () {
            $("#league_number").hide();
        });
        $(function () {
// 初始化Web Uploader
            var uploader = WebUploader.create({

                // 选完文件后，是否自动上传。
                auto: true,
                // 文件接收服务端。
                server: '/admin/uploadImage',

                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#filePicker',
                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                }
            });
// 当有文件添加进来的时候
            uploader.on('fileQueued', function (file) {
                var $li = $(
                    '<div id="' + file.id + '" class="file-item thumbnail">' +
                    '<img>' +
                    '<div class="info">' + file.name + '</div>' +
                    '</div>'
                    ),
                    $img = $li.find('img');

                var $list = $("#fileList");
                // $list为容器jQuery实例
                $list.append($li);
                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // thumbnailWidth x thumbnailHeight 为 100 x 100
                uploader.makeThumb(file, function (error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }

                    $img.attr('src', src);
                }, 100, 100);
            });
// 文件上传过程中创建进度条实时显示。
            uploader.on('uploadProgress', function (file, percentage) {
                var $li = $('#' + file.id),
                    $percent = $li.find('.progress span');

                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<p class="progress"><span></span></p>')
                        .appendTo($li)
                        .find('span');
                }

                $percent.css('width', percentage * 100 + '%');
            });

// 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on('uploadSuccess', function (file, response) {
                if (response.code == 200) {
                    $("#imagesId").val(response.path);
                    $("#filePicker").hide();
                }
                $('#' + file.id).addClass('upload-state-done');
            });

// 文件上传失败，显示上传出错。
            uploader.on('uploadError', function (file) {
                var $li = $('#' + file.id),
                    $error = $li.find('div.error');

                // 避免重复创建
                if (!$error.length) {
                    $error = $('<div class="error"></div>').appendTo($li);
                }

                $error.text('上传失败');
            });

// 完成上传完了，成功或者失败，先删除进度条。
            uploader.on('uploadComplete', function (file) {
                $('#' + file.id).find('.progress').remove();
            });

//执行一个laydate实例
//             var beginTime = laydate.render({
//                 type: 'datetime',
//                 elem: '#begin_time', //指定元素
//
//                 ready: function (date) {
//                     //将上面的属性赋值给此对象方法
//                     lay.extend(beginTime.config.dateTime, {
//                         hours: 00,
//                         minutes: 00,
//                         seconds: 00,
//                     });
//                 }
//             });
//
//             var endTime = laydate.render({
//                 type: 'datetime',
//                 elem: '#end_time', //指定元素
//                 ready: function (date) {
//                     //将上面的属性赋值给此对象方法
//                     lay.extend(endTime.config.dateTime, {
//                         hours: 23,
//                         minutes: 59,
//                         seconds: 59,
//                     });
//                 }
//             });

        });
    </script>
@endsection
